<template>
  <div class="main-box">
    <BaseTitle :title="trademark_id ? '编辑商标' : '新增商标'">
      <template #right>
        <BackBtn />
      </template>
    </BaseTitle>
    <el-form
      ref="formRef"
      class="flexForm"
      :rules="rules"
      :model="formData"
      label-position="top"
    >
      <el-form-item label="商标名称：" prop="title">
        <el-input v-model="formData.title" placeholder="请输入商标名称" />
      </el-form-item>
      <el-form-item label="申请/注册号：" prop="apply_code">
        <el-input
          v-model="formData.apply_code"
          placeholder="请输入申请/注册号"
        />
      </el-form-item>
      <el-form-item label="申请日期：" prop="apply_time">
        <el-date-picker
          v-model="formData.apply_time"
          type="date"
          :placeholder="$t('请选择日期时间')"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="注册人：" prop="apply_user">
        <el-input v-model="formData.apply_user" placeholder="请输入注册人" />
      </el-form-item>
      <el-form-item label="代理机构：" prop="agency">
        <el-input v-model="formData.agency" placeholder="请输入代理机构" />
      </el-form-item>

      <el-form-item label="类别：" prop="category">
        <el-input v-model="formData.category" placeholder="请输入类别" />
      </el-form-item>
      <el-form-item label="有效期至：" prop="valid_time">
        <el-date-picker
          v-model="formData.valid_time"
          type="date"
          :placeholder="$t('请选择日期时间')"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="注册地址：" prop="register_address">
        <el-input
          v-model="formData.register_address"
          placeholder="请输入注册地址"
        />
      </el-form-item>

      <el-form-item label="注册证书：" prop="certificate_img">
        <BaseUpload
          v-model="certificate_img"
          :show-list="false"
          @success="uploadSuccess($event, 'certificate_img')"
        >
          <BaseImg
            v-if="formData.certificate_img"
            :preview="false"
            class="upload-img"
            :src="$store.getters.imgURL + formData.certificate_img"
          />
          <div v-else class="upload-card">
            <i class="el-icon-plus" />
          </div>
          <p slot="description" />
        </BaseUpload>
      </el-form-item>
      <el-form-item label="商标图：" prop="trademark_img">
        <BaseUpload
          v-model="trademark_img"
          :show-list="false"
          @success="uploadSuccess($event, 'trademark_img')"
        >
          <BaseImg
            v-if="formData.trademark_img"
            :preview="false"
            class="upload-img"
            :src="$store.getters.imgURL + formData.trademark_img"
          />
          <div v-else class="upload-card">
            <i class="el-icon-plus" />
          </div>
          <p slot="description" />
        </BaseUpload>
      </el-form-item>
      <el-form-item label="发证机关：" prop="issuing_authority">
        <el-input
          v-model="formData.issuing_authority"
          placeholder="请输入发证机关"
        />
      </el-form-item>
      <el-form-item label=" " class="btn-submit">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import trademarkApi from '@/api/trademark'
export default {
  data() {
    return {
      trademark_id: '',
      rules: {
        title: {
          required: true,
          message: '请输入商标名称',
          trigger: 'blur'
        },
        apply_code: {
          required: true,
          message: '请输入申请/注册号',
          trigger: 'blur'
        },
        category: {
          required: true,
          message: '请输入类别',
          trigger: 'blur'
        },
        apply_time: {
          required: true,
          message: '请选择申请日期',
          trigger: 'change'
        },
        valid_time: {
          required: true,
          message: '请选择有效期',
          trigger: 'change'
        },
        certificate_img: {
          required: true,
          message: '请选择证书图片',
          trigger: 'change'
        },
        trademark_img: {
          required: true,
          message: '请选择商标图片',
          trigger: 'change'
        },
        register_address: {
          required: true,
          message: '请输入注册地址',
          trigger: 'blur'
        },
        apply_user: {
          required: true,
          message: '请输入申请人',
          trigger: 'blur'
        }
      },
      formData: {
        id: '',
        title: '',
        apply_code: '',
        category: '',
        apply_time: '',
        valid_time: '',
        agency: '',
        certificate_img: '',
        trademark_img: '',
        issuing_authority: '',
        register_address: '',
        apply_user: ''
      },
      certificate_img: [],
      trademark_img: []
    }
  },
  watch: {
    trademarkInfo: {
      handler(val) {
        this.formData = { ...val }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.trademark_id = this.$route.query.id
    if (this.$route.query.id) {
      this.getInfo(this.$route.query.id)
    }
  },
  methods: {
    // 商标详情
    async getInfo(id) {
      const res = await trademarkApi.trademarkDetial({ id })
      if (res.code == 0) {
        this.formData = {
          ...res.data
        }
        this.certificate_img = [{ url: res.data.certificate_img }]
        this.trademark_img = [{ url: res.data.trademark_img }]
      }
    },
    // 上传图片成功
    uploadSuccess($event, str) {
      this.formData[str] = $event.url
    },
    // 提交保存
    async handleSubmit() {
      const res = await this.$refs.formRef
        .validate()
        .catch(err => console.log(err))
      if (res) {
        let result = null
        if (this.formData.id) {
          result = await trademarkApi.editTrademark(this.formData)
        } else {
          result = await trademarkApi.addTrademark(this.formData)
        }
        if (result.code == 0) {
          this.$message.success(result.msg)
          this.$router.go(-1)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.addForm {
  ::v-deep .el-date-editor.el-input {
    width: 100%;
  }
}
.btn-submit {
  margin-top: 10px;
}
.upload-img {
  width: 100px;
}
.upload-card {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 100px;
}
</style>
